<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor  style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderSkyBox('1')">效果1</el-button>
            <el-button @click="renderSkyBox('2')">效果2</el-button>
            <el-button @click="renderSkyBox('3')">效果3</el-button>
            <el-button @click="renderSkyBox('4')">效果4</el-button>
            <el-button @click="renderSkyBox('5')">效果5</el-button>
            <el-button @click="renderSkyBox('6')">效果6</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import {skyBox} from "@/widgets/modelExample_cesium/common/skyBoxManage";
import {onMounted, ref} from "vue";

import AceEditor from "@/components/aceEditor.vue";

const htmlStr=ref(`
 <template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderSkyBox('1')">效果1</el-button>
            <el-button @click="renderSkyBox('2')">效果2</el-button>
            <el-button @click="renderSkyBox('3')">效果3</el-button>
            <el-button @click="renderSkyBox('4')">效果4</el-button>
            <el-button @click="renderSkyBox('5')">效果5</el-button>
            <el-button @click="renderSkyBox('6')">效果6</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import {skyBox} from "@/widgets/modelExample_cesium/common/skyBoxManage";
import {onMounted, ref} from "vue";

const renderSkyBox=(typeNumber:string)=>{
  skyBox( cViewer.value,typeNumber);
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  loadTdtLayer(cViewer.value, 'c', false);
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: 240px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .single_item{
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }
  .single_item_title{
    margin: 10px;
    color: #ffffff;
  }
}
</style>

`);
const  tsStr=ref(`
import * as Cesium from 'cesium'
import { getAssetsFile } from "@/utils/utils";
let pictures=[
    "tycho2t3_80_mx.jpg",
    "tycho2t3_80_my.jpg",
    "tycho2t3_80_mz.jpg",
    "tycho2t3_80_px.jpg",
    "tycho2t3_80_py.jpg",
    "tycho2t3_80_pz.jpg"
];

const skyBox=(viewer:any,typeNumber:string='1')=>{
    let basUrl:string='skybox/';
    viewer.scene.skyBox = new Cesium.SkyBox({
        sources: {
            negativeX:getAssetsFile(basUrl+typeNumber+'/'+pictures[0])   ,
            negativeY: getAssetsFile(basUrl+typeNumber+'/'+pictures[1])  ,
            negativeZ:getAssetsFile(basUrl+typeNumber+'/'+pictures[2])  ,
            positiveX:getAssetsFile(basUrl+typeNumber+'/'+pictures[3])  ,
            positiveY:getAssetsFile(basUrl+typeNumber+'/'+pictures[4])  ,
            positiveZ: getAssetsFile(basUrl+typeNumber+'/'+pictures[5])  ,
        },
    });
}
export {
 skyBox
}

`);

const renderSkyBox=(typeNumber:string)=>{
  skyBox( cViewer.value,typeNumber);
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  loadTdtLayer(cViewer.value, 'c', false);
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: 240px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .single_item{
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }
  .single_item_title{
    margin: 10px;
    color: #ffffff;
  }
}
</style>
